<template>
  <div>
    <div class="top" v-if="$route.meta.keepAlive">
      <span class="cinema">影院</span>
      <span @click="gocity">
        {{ $store.state.city }}
        <i class="iconfont icon-xiajiantou"></i>
      </span>
      <i class="iconfont icon-sousuo sousuo"></i>
    </div>
    <van-dropdown-menu active-color="#ff5f16" v-if="$route.meta.keepAlive">
      <van-dropdown-item
        v-model="value1"
        :options="option1"
        @click="changecontent()"
      >
      </van-dropdown-item>
      <van-dropdown-item v-model="value2" :options="option2" />
      <van-dropdown-item v-model="value3" :options="option3" />
    </van-dropdown-menu>
    <div class="box" v-if="$route.meta.keepAlive">
      <div
        class="list"
        v-for="item in cinemalist"
        :key="item.cinemaId"
        @click="godetail(item.cinemaId)"
      >
        <div class="left">
          <div class="center">
            <div class="cinemaname">{{ item.name }}</div>
            <div class="cinemaaddress">{{ item.address }}</div>
          </div>
        </div>
        <div class="right">
          <div class="cinemaprice">￥{{ item.lowPrice | tofixed }}起</div>
          <div class="weizhi">{{ '距离未知' }}</div>
        </div>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
import Vue from 'vue'
import api from '@/api/index.js'
import { DropdownMenu, DropdownItem } from 'vant'
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
export default {
  data() {
    return {
      value1: 0,
      value2: 'a',
      value3: 'a',
      cinemalist: [],
      option1: [
        {
          text: '全城',
          value: 0
        }
      ],
      option2: [
        { text: 'APP订票', value: 'a' },
        { text: '前台兑换', value: 'b' }
      ],
      option3: [
        { text: '最近去过', value: 'a' },
        { text: '离我最近', value: 'b' }
      ]
    }
  },
  created() {
    this.$http
      .get(
        api.getCinemaList +
          '?cityId=' +
          this.$store.state.cityId +
          '&' +
          'pageSize=237'
      )
      .then((res) => {
        // console.log(res)
        this.cinemalist = res.data.cinemas
        var arr = []
        var brr = []
        res.data.cinemas.forEach((item) => {
          if (brr.indexOf(item.districtName) === -1) {
            arr.push(item.districtName)
            brr.push(item.districtName)
          }
        })
        brr.forEach((item, index) => {
          var obj = {
            text: item,
            value: index + 1
          }
          this.option1.push(obj)
          // console.log(obj)
        })
      })
  },
  methods: {
    gocity() {
      this.$router.push('/city')
    },
    godetail(id) {
      this.$router.push({
        path: '/cinema/detail',
        query: {
          id
        }
      })
    }
  },
  filters: {
    tofixed: function (val) {
      return val / 100
    }
  }
}
</script>
<style lang="scss" scoped>
.top {
  width: 100%;
  height: 44px;
  background-color: #fff;
  text-align: center;
  line-height: 44px;
  font-size: 17px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
  .cinema {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  span {
    font-size: 16px;
    position: absolute;
    left: 20px;
    top: 0;
  }
  .sousuo {
    float: right;
    font-size: 20px;
    position: relative;
    right: 10px;
  }
}
.van-dropdown-menu {
  width: 100%;
  position: fixed;
  top: 44px;
  left: 0;
  z-index: 10;
  // margin-top: 44px;
}
.box {
  margin-bottom: 44px;
  margin-top: 99px;
  .list {
    height: 75px;
    display: flex;
    border-bottom: 1px solid #ededed;
    color: #ededed;
    .left {
      width: 80%;
      height: 100%;
      .center {
        width: 75%;
        margin: 18px 10px;
        .cinemaname {
          color: #191a1b;
          font-size: 15px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .cinemaaddress {
          color: #797d82;
          font-size: 12px;
          margin-top: 5px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    .right {
      width: 20%;
      height: 100%;
      text-align: center;
      .cinemaprice {
        font-size: 13px;
        color: #ff5f16;
        position: relative;
        top: 20px;
      }
      .weizhi {
        font-size: 11px;
        color: #797d82;
        margin-top: 5px;
        position: relative;
        top: 18px;
      }
    }
  }
}
</style>